<script setup>
import { ref } from 'vue'

const counts = ref({
  users: 856,
  services: 324,
  notices: 98,
  activities: 45
})

const serviceChartOptions = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '服务类型',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 235, name: '报修' },
        { value: 124, name: '投诉' },
        { value: 65, name: '建议' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

const activityChartOptions = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [3, 5, 8, 13, 7, 6, 3],
      type: 'bar',
      color: '#409EFF'
    }
  ]
}
</script>

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(value, key, index) in counts" :key="index">
        <el-card shadow="hover" class="data-card">
          <div class="data-card-content">
            <div class="data-card-value">{{ value }}</div>
            <div class="data-card-label">
              {{ 
                key === 'users' ? '用户总数' : 
                key === 'services' ? '服务请求数' :
                key === 'notices' ? '公告数量' : '活动数量'
              }}
            </div>
          </div>
          <div class="data-card-icon">
            <el-icon size="40" color="#409EFF">
              <User v-if="key === 'users'" />
              <Service v-else-if="key === 'services'" />
              <Bell v-else-if="key === 'notices'" />
              <Calendar v-else />
            </el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>服务请求分布</span>
            </div>
          </template>
          <div class="chart-container">
            <el-chart :option="serviceChartOptions" autoresize />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>活动发布趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <el-chart :option="activityChartOptions" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近服务请求</span>
              <el-button class="button" text>查看全部</el-button>
            </div>
          </template>
          <el-table :data="[
            { id: 1, type: '报修', content: '7栋电梯故障', status: '处理中', createTime: '2023-10-15 09:23:45', username: '张三' },
            { id: 2, type: '投诉', content: '噪音扰民问题', status: '已处理', createTime: '2023-10-14 16:34:12', username: '李四' },
            { id: 3, type: '建议', content: '增加小区健身设施', status: '已回复', createTime: '2023-10-13 11:45:23', username: '王五' },
            { id: 4, type: '报修', content: '路灯不亮', status: '待处理', createTime: '2023-10-12 20:12:56', username: '赵六' },
            { id: 5, type: '投诉', content: '楼道卫生问题', status: '处理中', createTime: '2023-10-11 13:56:34', username: '孙七' }
          ]" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="type" label="类型" width="100" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="username" label="提交人" width="100" />
            <el-table-column prop="createTime" label="提交时间" width="160" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="
                  scope.row.status === '待处理' ? 'info' :
                  scope.row.status === '处理中' ? 'warning' :
                  scope.row.status === '已处理' ? 'success' : 'primary'
                ">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.data-card {
  height: 100px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.data-card-content {
  flex: 1;
}

.data-card-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.data-card-label {
  margin-top: 8px;
  font-size: 14px;
  color: #909399;
}

.data-card-icon {
  margin-right: 10px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-row {
  margin-bottom: 20px;
}
</style> 